﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WUC_Login.ascx.cs" Inherits="FDeal.WUC.WUC_Login" %>
<link href="../css/Site.css" rel="stylesheet" type="text/css"/>
<asp:Panel ID="pnDangNhap" runat="server">
    <asp:HyperLink ID="hlDangNhap" href="#dialog1" name="modal" runat="server" 
        ForeColor="Blue">Đăng Nhập</asp:HyperLink>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</asp:Panel>
<asp:Panel ID="pnDangXuat" runat="server" Visible="False">
    <asp:Label ID="lbTenUserName" runat="server" ForeColor="Blue"></asp:Label>
    <asp:HyperLink ID="hlDangXuat" runat="server" ForeColor="Blue" >Đăng Xuất</asp:HyperLink>
</asp:Panel>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
    $(document).ready(function () {

        //select all the a tag with name equal to modal
        $('a[name=modal]').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            //Get the A tag
            var id = $(this).attr('href');

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //Set heigth and width to mask to fill up the whole screen
            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

            //transition effect		
            $('#mask').fadeIn(1000);
            $('#mask').fadeTo("slow", 0.8);

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            //Set the popup window to center
            $(id).css('top', winH / 2 - $(id).height() / 2);
            $(id).css('left', winW / 2 - $(id).width() / 2);

            //transition effect
            $(id).fadeIn(2000);

        });

        //if close button is clicked
        $('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#mask').hide();
            $('.window').hide();
        });

        //if mask is clicked
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });

        $(window).resize(function () {

            var box = $('#boxes .window');

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //Set height and width to mask to fill up the whole screen
            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            //Set the popup window to center
            box.css('top', winH / 2 - box.height() / 2);
            box.css('left', winW / 2 - box.width() / 2);

        });

    });
</script>



<div id="boxes">

<!-- Start of Login Dialog -->  
<div id="dialog1" class="window" align="right">
  <div class="d-header" align="right">
  <asp:Panel ID="pnUserNameLogin" runat="server">
     <asp:Label ID="Label2" runat="server" Text="User Name :"></asp:Label>
     <asp:TextBox ID="tbUserName" runat="server" value="ABCDEF" onclick="this.value=''" ControlToValidate="tbUserName"></asp:TextBox>
     <asp:RequiredFieldValidator ID="rfrUserName" runat="server" ErrorMessage="Chưa nhập tên đăng nhập." ClientIDMode="Inherit" ControlToValidate="tbUserName" EnableTheming="True" Text="*"></asp:RequiredFieldValidator>
  </asp:Panel>
  <asp:Panel ID="pnPassLogin" runat="server">
     <asp:Label ID="Label3" runat="server" Text="Password :"></asp:Label>
     <asp:TextBox ID="tbPassword" runat="server" value="9812345" onclick="this.value=''" TextMode="Password"></asp:TextBox>
     <asp:RequiredFieldValidator ID="rfrPassword" runat="server"  ErrorMessage="Chưa nhập password." ControlToValidate="tbPassword"></asp:RequiredFieldValidator>
  </asp:Panel>
  </div>
    <asp:Panel ID="pnButtonLogin" runat="server" HorizontalAlign="Right">
        <asp:Button ID="btOkLogin" runat="server" Text="OK" Height="30" Width="70" OnClick = "btOkLogin_Click"/>
        <asp:Button ID="btCancelLogin" runat="server" class="close" Text="Cancel" Width="70" Height="30" />
    </asp:Panel>
  <div class="d-blank"></div>
</div>
<!-- End of Login Dialog -->

<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>